<template>
  <div class="dashboard-container-content-left-part2">
    <PartTitle title="数据安全关键岗位人员" />
    <div class="dashboard-container-content-left-part2-content">
      <div class="dashboard-container-content-left-part2-content-top">
        <img
          src="@/assets/images/aaa.jpg"
          alt="contentLeftPart2"
          style="width: 436px; height: 352px"
        />
      </div>
      <div class="dashboard-container-content-left-part2-content-bottom">
        <div class="dashboard-container-content-left-part2-content-bottom-item">
          <div
            class="dashboard-container-content-left-part2-content-bottom-item-count1"
          >
            41
          </div>
          <div
            class="dashboard-container-content-left-part2-content-bottom-item-name"
          >
            网络条线
          </div>
        </div>
        <div class="dashboard-container-content-left-part2-content-bottom-item">
          <div
            class="dashboard-container-content-left-part2-content-bottom-item-count2"
          >
            45
          </div>
          <div
            class="dashboard-container-content-left-part2-content-bottom-item-name"
          >
            政企条线
          </div>
        </div>
        <div class="dashboard-container-content-left-part2-content-bottom-item">
          <div
            class="dashboard-container-content-left-part2-content-bottom-item-count3"
          >
            60
          </div>
          <div
            class="dashboard-container-content-left-part2-content-bottom-item-name"
          >
            业支条线
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import PartTitle from "./partTitle.vue";

  export default {
  name: "ContentLeftPart2",
  components: {
    PartTitle,
  },
};
</script>
<style lang="scss" scoped>
.dashboard-container-content-left-part2 {
  width: 100%;
  height: 500px;
  border-radius: 14px;
  background: linear-gradient(180deg, #314175 0%, #0e1428 100%);
  box-shadow: 0px 20px 101px 0px #0303033f;
  padding: 22px;

  &-content {
    display: flex;
    flex-direction: column;
    gap: 10px;

    &-top {
      width: 100%;
      height: 352px;
    }

    &-bottom {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;

      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: radial-gradient(
          circle at 50% 50%,
          #ffffff00 0%,
          #ffffff0a 100%
        );
        border: 1px solid #3786f114;
        backdrop-filter: blur(24px);
        width: 136px;
        height: 62px;

        &-count1 {
          color: #70cf97;
          font-family: MiSans;
          font-weight: bold;
          font-size: 24px;
          line-height: normal;
          letter-spacing: 0px;
          text-align: left;
        }

        &-count2 {
          color: #ca74ff;
          font-family: MiSans;
          font-weight: bold;
          font-size: 24px;
          line-height: normal;
          letter-spacing: 0px;
          text-align: left;
        }

        &-count3 {
          color: #f97266;
          font-family: MiSans;
          font-weight: bold;
          font-size: 24px;
          line-height: normal;
          letter-spacing: 0px;
          text-align: left;
        }

        &-name {
          color: #ffffffcc;
          font-family: MiSans;
          font-weight: regular;
          font-size: 12px;
          line-height: normal;
          letter-spacing: 0px;
          text-align: left;
        }
      }
    }
  }
}
</style>
